<div oc-lazy-load="['app/modules/toast.js']">
    <div class="container toast-usage" data-ng-controller="ToastCtrl as ctrl">

        <div class="block-header">
            <h2>Toast</h2>
        </div>


        <div class="row">
            <div class="col-md-12">
                <md-card class="m-b-30">
                    <md-card-header>
                        <md-card-header-text>
                            <span class="md-title">Material Color Palette</span>
                    <span class="md-subhead">
                        Markup: &lt;any class=&quot;bgc-red c-white&quot;&gt;Material Color Palette&lt;/any&gt;
                    </span>
                        </md-card-header-text>
                    </md-card-header>
                    <md-card-content>
                        <p>
                            Toast can be dismissed with a swipe, a timer, or a button.<br/>
                            <span style="font-size:0.8em">Notice the 'Show Custom' toast will not nudge the FABs positions since a custom parent was specified.</span>
                        </p>
                        <div>
                            <div style="width:50px"></div>
                            <md-button ng-click="showSimpleToast()">
                                Show Simple
                            </md-button>
                            <md-button class="md-raised" ng-click="showActionToast()">
                                Show With Action
                            </md-button>
                            <md-button ng-click="showCustomToast()">
                                Show Custom
                            </md-button>
                            <div style="width:50px"></div>
                        </div>
                        <div id="toastBounds">
                            <div>
                                <br/>
                                <b>Toast Position: "{{getToastPosition()}}"</b>
                                <br/>
                                <md-checkbox ng-repeat="(name, isSelected) in toastPosition"
                                             ng-model="toastPosition[name]">
                                    {{name}}
                                </md-checkbox>
                            </div>
                        </div>

                    </md-card-content>
                </md-card>
            </div>


        </div>

    </div>
</div>
<script id="toast-template.html" type="text/ng-template">
    <md-toast>
        <span flex>Custom toast!</span>
        <md-button ng-click="closeToast()">
            Close
        </md-button>
    </md-toast>
</script>
